


  <!--头部-->
  <header class="_header">
    <div class="container">
      <div class="_header-logo">
        <a routerLink="/main"><img src="assets/img/icon/librarylogo.png" class="logo" /></a>
      </div>
      <div class="_header-right">
        <p class="_header-language">
          <a id="myid" href="#">EN</a>
          <a class="active" >中文</a>
        </p>
        <div class="_header-search">
          <div class="_header-search-l">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon" (click)="gopubu()"><img src="assets/img/icon/search.png" /></div>
                  <input  type="text" id="key" name="key" #key [(ngModel)]="keyt"
                            (keyup)="searchchange($event)" (change)="searchchange($event)"

                         class="form-control" style="z-index: 6;padding-left: 10px;" placeholder="搜索材料/制造厂" />
                </div>
              </div>
            </form>
            <div class="_search-div" id="choice">
              <!--<dl class="_search-item"><dd>表面材料</dd><dt>×</dt></dl>
              <dl class="_search-item"><dd>表面材料</dd><dt>×</dt></dl>-->
            </div>
            <div class="_search-list" id="searchResult">
              <ul>
                <li>表面材料</li>
                <li>表面处理</li>
                <li>表面图案</li>
                <li>表面机理</li>
                <li>表面材料</li>
              </ul>
            </div>
          </div>
          <div class="_header-search-r">
            <a *ngIf="!inper" (click)="gopercent()"><img src="assets/img/icon/account.png" /></a>
            <a (click)="lgModal.show()" *ngIf="inper"><img src="assets/img/icon/account.png" /></a>
            <a (click)="tShow();getlistitem()" href="javascript:;"><img src="assets/img/icon/category.png" id="showFactoryClass" /></a>
          </div>

          <!--制造厂分类-->
          <div [ngClass]="{show: toptsh}" class="_factory-class">
            <div [ngClass]="{show: toptsh}" class="_filter" id="factoryClass">
              <div class="_filter-arrow" style="z-index: -1"></div>
              <ul>
                <li>
                  <ul class="arrow-sp">
                    <li class="arrow" *ngFor="let ite of listda"  >
                      <p (click)="golistsearch(ite.name)"><a ><span></span>{{ite.name}}</a></p>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!--瀑布流列表-->
  <div class="container _container">
    <router-outlet></router-outlet>
  </div>

  <div (click)="tShow()" [hidden]="!toptsh" style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;opacity: 0;"></div>

<!-- 登陆Modal -->
<!--<div class="login-modal"  [style.display]="lashow ? 'none':'block'"></div>-->
<div class="modal fade _modal-form "  bsModal #lgModal="bs-modal"   tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">登陆</h4>
        <p class="modal-tip">您必须登陆才能获取手工艺材料数据库完整信息。还不是会员？请阅读
          <a routerLink="/linkVip" (click)="lgModal.hide()">会员说明</a>了解会员权益。</p>
      </div>
      <div class="modal-body">
        <form class="form-horizontal _form" role="form" #userForm="ngForm">
          <p *ngIf="!showfrom" style="color: red">您输入的信息有误，请输入正确信息！</p>
          <div class="form-group">
            <!--<p style="color: red" [hidden]="email.pristine " >电子邮箱不可以为空!</p>-->
            <input type="text" class="form-control"   required #email placeholder="电子邮箱">
          </div>
          <div class="form-group">
            <!--<p style="color: red" [hidden]="pwd.untouched || pwd.valid" >密码不可以为空!</p>-->
            <input type="password" class="form-control"   required #pwd placeholder="密码">
          </div>
          <div class="form-line"></div>
          <div class="form-group">
            <p class="form-error"></p>
            <input type="text" class="form-control"  #invitation placeholder="邀请码登陆">
          </div>
          <p class="form-forget">
            <a routerLink="/linkRegister" (click)="lgModal.hide()"  class="pull-left">注册会员</a>
            <a routerLink="/linkPassword" (click)="lgModal.hide()" >忘记密码</a>
          </p>
          <div class="form-group form-btn">
            <button  type="button" class="btn btn-submit" [disabled]="!userForm.form.valid"  (click)="getHeroes(email.value,pwd.value,invitation.value);email.value='';pwd.value='';invitation.value=''">提交</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<style>
  ._header-search-l  input.form-control:focus{outline: none}
  ._factory-class ._filter>ul>li>ul>li{
    line-height: 20px;
  }
  ._factory-class ._filter>ul>li>ul>.acti{
    background-color: #EEEEEE;
  }
  ._factory-class ._filter>ul>li>ul>.acti>p>a{
     border-left: #E60012;
  }
  ._factory-class ._filter>ul>li>ul>li>p>a:hover{
    text-decoration: none;
  }
</style>
